<template>
    <el-dialog v-model="dialogFormVisible" :title="drawerTitle" :width="dialogWidth">
        <div class="body">
            <slot></slot>
        </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="submit">
          确定
        </el-button>
      </div>
    </template>
</el-dialog>
</template>

<script setup>
import { ref } from "vue"
const formLabelWidth = '140px'
const dialogFormVisible = ref(false)
const props = defineProps({
    drawerTitle:{
        type:String, 
    },
    dialogWidth:{
        type:Number, 
        default:500
    },
})
const loading = ref(false)
const showLoading = ()=>loading.value = true
const hideLoading = ()=>loading.value = false
// 打开
const open = ()=> dialogFormVisible.value = true

// 关闭
const close = ()=>dialogFormVisible.value = false
// 提交
const emit = defineEmits(["submit"])
const submit = ()=> emit("submit")

// 向父组件暴露以下方法
defineExpose({
        open,
        close,
        showLoading,
        hideLoading
    })
</script>